<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css" />
<head th:include="include :: header"></head>
<link rel="stylesheet" href="/css/plugins/steps/jquery.steps.css"/>
<link href="/js/plugins/layui/css/layui.css" rel="stylesheet">
<style>
.wizard-big.wizard > .content {
    height: 850px;
    overflow:auto;
}

</style>
<body class="gray-bg">


<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>添加商户</h5>
                </div>
                <div class="ibox-content">

                    <form id="merchantForm" class="wizard-big">
                       <h1>商户信息</h1>
                        <fieldset>
                            <div class="row" >
                            	<div class="col-sm-6">
                                    <div class="form-group">
                                        <label>开户渠道</label>
                                        <select id="parentAgent" name="parentAgent" class="form-control required" required="required">
											<option value="">请选择</option>
											<option th:each="agent:${agentNs}" th:value="${agent.key}" th:text="${agent.value}"></option>
										</select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    
                                </div>
                                <div class="col-sm-12">
                                	<legend>开户信息</legend>
                                </div>
                            	<div class="col-sm-6">
                            		<div class="form-group">
                                        <label>商户号 *</label>
                                        <input id="merchNo" name="merchNo" class="form-control required" type="text" required="required" readonly="readonly" th:value="${merchNo}">
                                    </div>
                                    <div class="form-group">
                                        <label>管理员姓名 *</label>
                                        <input id="managerName" name="managerName" class="form-control required" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>管理员电话(唯一) *</label>
                                        <input id="managerPhone" name="managerPhone" class="form-control required" type="text" required="required" >
                                    </div>
                                    <div class="form-group">
                                        <label>签约使用时间 *</label>
                                        <div>
	                                       	<input id="beginDate"  type="text"  class="form-control form_datetime required" style="width:40%;float: left;" placeholder="开始时间" data-date-format="yyyy-MM-dd" data-link-format="yyyy-MM-dd" required="required" readonly="readonly">
											<span style="vertical-align:top;padding: 8px;float: left;">-</span>
											<input id="endDate" type="text"  class="form-control form_datetime required"  style="width:40%;float: left;" placeholder="结束时间"  data-date-format="yyyy-MM-dd" data-link-format="yyyy-MM-dd" required="required" readonly="readonly">
											<input id="contractEffectiveTime" name="contractEffectiveTime" class="form-control" type="hidden">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                	<div class="form-group">
                                        <label>指派代付通道(未指派系统默认通道轮洵)</label>
                                        <select id="payConfigCompany" name="payConfigCompany" class="form-control">
											<option value="">请选择</option>
											<option th:each="payConfigCompany:${payConfigCompany}" th:value="${payConfigCompany.payMerch}" th:attr="company=${payConfigCompany.company}" th:text="${payConfigCompany.callbackDomain+'('+payConfigCompany.payMerch+')'}"></option>
										</select>
										<input type="hidden" id="paidChannelStr" name="paidChannelStr"/>
                                    </div>
                                    <div class="form-group">
                                        <label>通道分类 *</label>
                                        <select id="payChannelType" name="payChannelType" class="form-control" required="required">
											<option value="">请选择</option>
											<option th:each="payChannelTypes:${payChannelTypes}" th:value="${payChannelTypes.key}" th:text="${payChannelTypes.value}"></option>
										</select>
                                    </div>
                                    <div class="form-group">
                                        <label>启用时间 *</label>
                                        <div>
                                        	<input id="enableTime" name="enableTime" type="text"  class="form-control form_datetime required" required="required" style="width:80%; float: left" placeholder="启动时间"  data-date-format="yyyy-MM-dd" data-link-format="yyyy-MM-dd" readonly="readonly">
                                    	</div>
                                    </div>
                                </div>
                                
                                <div class="col-sm-12" style="margin-top: 18px;">
                                	<legend>联系人信息</legend>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>商户名称 *</label>
                                        <input id="merchantsName" name="merchantsName" class="form-control required" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>父级行业 *</label>
                                        <select id="merchantsIndustryCode" name="merchantsIndustryCode" class="form-control required" required="required">
											<option value="">--父级行业--</option>
											<option th:each="IndustryP:${IndustryP}" th:value="${IndustryP.id}" th:text="${IndustryP.name}"></option>
										</select>
										<input type="hidden" name="merchantsIndustry" id="merchantsIndustry" />
                                    </div>
                                    <div class="form-group">
                                        <label>联系人 *</label>
                                        <input id="contacts" name="contacts" class="form-control required" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>联系人邮箱 *</label>
                                        <input id="contactsEmail" name="contactsEmail" class="form-control" type="email" required="required">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>商户简称 *</label>
                                        <input id="merchantsShortName" name="merchantsShortName" class="form-control required" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>子级行业 *</label>
                                        <select id="merchantsSubIndustryCode" name="merchantsSubIndustryCode" class="form-control required" required="required">
											<option value="">--子级行业--</option>
										</select>
										<input type="hidden" name="merchantsSubIndustry" id="merchantsSubIndustry" />
                                    </div>
                                    <div class="form-group">
                                        <label>联系人电话 *</label>
                                        <input id="contactsPhone" name="contactsPhone" class="form-control required" type="tel" required="required" maxlength="11">
                                    </div>
                                    <div class="form-group">
                                        <label>联系人QQ *</label>
                                        <input id="contactsQq" name="contactsQq" class="form-control required" type="text" required="required">
                                    </div>
                                </div>
							</div>
                        </fieldset>
                        <h1>实名资料</h1>
                        <fieldset>
                            <div class="row" style="margin-bottom: 18px;">
                            	<div class="col-sm-12">
	                            	<legend>实名信息</legend>
	                            </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>省份 *</label>
                                        <select id="provinceCode" name="provinceCode" class="form-control required" required="required">
											<option value="">请选择</option>
											<option th:each="pro:${provinces}" th:value="${pro.id}" th:text="${pro.name}"></option>
										</select>
										<input type="hidden" name="province" id="province" />
                                    </div>
                                    <div class="form-group">
                                        <label>营业执照号 *</label>
                                        <input id="merchantRegisteredNumber" name="merchantRegisteredNumber" class="form-control required" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>类型 *</label>
                                        <select id="merchantType" name="merchantType" class="form-control" required="required">
											<option  th:value="1" th:text="企业商户"></option>
										</select>
                                    </div>
                                    <div class="form-group">
                                        <label>注册资本 *</label>
                                        <input id="merchantRegisteredCapital" name="merchantRegisteredCapital" class="form-control" type="text" required="required">
                                    </div>
                                	<div class="form-group">
                                        <label>经营范围 *</label>
                                        <textarea style="height: 200px;" id="merchantBusinessScope" name="merchantBusinessScope" class="form-control required"  required="required"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label>法人姓名 *</label>
                                        <input id="legalerName" name="legalerName" class="form-control required" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>法人证件号码 *</label>
                                        <input id="legalerCardNumber" name="legalerCardNumber" class="form-control required" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>证件正面 *</label>
				                        <div>
	                                        <div class="layui-upload-drag" id="img_front" style="width: 70%;height: 200px;" >
	                                        	<img alt="" src="" id="img_f" width="100%" height="100%"/>
	                                        	<p>点击上传，或将文件拖拽到此处</p>
	                                        </div>
	                                        <input required="required" type="hidden" name="legalerCardPicFront" id="legalerCardPicFront" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>城市 *</label>
                                        <select id="cityCode" name="cityCode" class="form-control required" required="required">
						 				</select>
						 				<input type="hidden" name="city" id="city" />
                                    </div>
                                    <div class="form-group">
                                        <label>营业执照名称 *</label>
                                        <input id="merchantName" name="merchantName" class="form-control required" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>注册地址 *</label>
                                        <input id="merchantAddress" name="merchantAddress" class="form-control" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>营业期限 *</label>
                                        <div>
	                                        <input readonly="readonly" id="beginDateT" name="beginDateT" type="text"  class="form-control form_datetime" required="required" style="width:40%;float: left" placeholder="开始时间"  data-date-format="yyyy-MM-dd" data-link-format="yyyy-MM-dd">
											<span style="vertical-align:top;padding: 8px;float: left">-</span>
											<input readonly="readonly" id="endDateT" name="endDateT" type="text"  class="form-control form_datetime" required="required" style="width:40%;  placeholder="结束时间"  data-date-format="yyyy-MM-dd" data-link-format="yyyy-MM-dd">
											<input id="merchantBusinessTerm" name="merchantBusinessTerm" class="form-control" type="hidden">
										</div>
                                    </div>
                                    <div class="form-group">
                                        <label>营业执照影印件 *</label>
                                        <div>
	                                        <div class="layui-upload-drag" id="img_bis" style="width: 70%;height: 200px;" >
	                                        	<img alt="" src="" id="img_bp" width="100%" height="100%"/>
	                                        	<p>点击上传，或将文件拖拽到此处</p>
	                                        </div>
	                                        <input required="required" type="hidden" name="merchantBusinessPhotocopy" id="merchantBusinessPhotocopy" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>法人证件类型 *</label>
                                        <select id="legalerCardType" name="legalerCardType" class="form-control required" required="required">
											<option th:each="pro:${certTypes}" th:value="${pro.key}" th:text="${pro.value}"></option>
										</select>
                                    </div>
                                    <div class="form-group">
                                        <label>法人证件有效时间 *</label>
                                        <div>
	                                        <input id="beginDateL" name="beginDateL" type="text"  class="form-control form_datetime required" required="required" style="width:40%;float: left" placeholder="开始时间"  data-date-format="yyyy-MM-dd" data-link-format="yyyy-MM-dd" readonly="readonly">
											<span style="vertical-align:top;padding: 8px;float: left">-</span>
											<input id="endDateL" name="endDateL" type="text"  class="form-control form_datetime required" required="required" style="width:40%;" placeholder="结束时间"  data-date-format="yyyy-MM-dd" data-link-format="yyyy-MM-dd" readonly="readonly">
											<input id="legalerCardEffectiveTime" name="legalerCardEffectiveTime" class="form-control" type="hidden">
										</div>
                                    </div>
                                    <div class="form-group">
                                        <label>证件反面 *</label>
                                        <div>
	                                        <div class="layui-upload-drag" id="img_back" style="width: 70%;height: 200px;" >
	                                        	<img alt="" src="" id="img_b" width="100%" height="100%"/>
	                                        	<p>点击上传，或将文件拖拽到此处</p>
	                                        </div>
	                                        <input required="required" type="hidden" name="legalerCardPicBack" id="legalerCardPicBack" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12" style="margin-top: 18px;">
	                            	<legend>结算账户</legend>
	                            </div>
	                            <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>账户类型 *</label>
                                        <select id="accountType" name="accountType" class="form-control" required="required">
											<option th:each="acctType:${acctTypes}" th:value="${acctType.key}" th:text="${acctType.value}"></option>
										</select>
                                    </div>
                                    <div class="form-group">
                                        <label>开户银行 *</label>
                                        <select id="accountBankCode" name="accountBankCode" class="form-control" required="required">
											<option value="">请选择</option>
											<option th:each="bc:${bankCodes}" th:value="${bc.key}" th:text="${bc.value}"></option>
										 </select>
										 <input type="hidden" name="accountBank" id="accountBank" />
                                    </div>
                                    <div class="form-group">
                                        <label>开户人 *</label>
                                        <input id="accountOpenPerson" name="accountOpenPerson" class="form-control" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>开户人身份证号码 *</label>
                                        <input id="accountOpenCardNumber" name="accountOpenCardNumber" class="form-control" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                    	<label>卡/证影印件 *</label>
				                        <div>
	                                       <div class="layui-upload-drag" id="img_pic" style="width: 70%;height: 200px;" >
	                                       	<img alt="" src="" id="img_p" width="100%" height="100%"/>
	                                       	<p>点击上传，或将文件拖拽到此处</p>
	                                       </div>
	                                       <input required="required" type="hidden" name="accountPic" id="accountPic" />
	                                    </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>开户城市 *</label>
                                        <div>
	                                        <select id="accountProvinceCode" name="accountProvinceCode" class="form-control required" required="required" style="width: 40%;float: left">
												<option value="">--省份--</option>
												<option th:each="pro:${provinces}" th:value="${pro.id}" th:text="${pro.name}"></option>
											</select>
											<span style="vertical-align:top;padding: 8px;float: left">-</span>
											<input type="hidden" name="accountProvince" id="accountProvince" />
											<select id="accountCityCode" name="accountCityCode" class="form-control required" required="required" style="width: 40%">
												<option value="">--市--</option>
							 				</select>
							 				<input type="hidden" name="accountCity" id="accountCity" />
						 				</div>
                                    </div>
                                    <div class="form-group">
                                        <label>支行 *</label>
                                        <select id="accountBankBranchCode" name="accountBankBranchCode" class="form-control">
						 				</select>
						 				<input type="hidden" name="accountBankBranch" id="accountBankBranch" />
                                    </div>
                                    <div class="form-group">
                                        <label>开户账号(结算账号) *</label>
                                        <input id="accountOpenNumber" name="accountOpenNumber" class="form-control" type="text" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>银行预留手机号 *</label>
                                        <input id="accountOpenPhone" name="accountOpenPhone" class="form-control" type="text" maxlength="11" required="required">
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <h1>费率设置</h1>
                        <fieldset>
                            <div class="row">
                            	<div class="col-sm-12">
	                            	<legend>结算方式</legend>
	                            </div>
	                            <div class="col-sm-3" th:each="paymentMethod:${paymentMethods}">
	                            	<div class="form-group">
	                                	<div class="layui-form" lay-filter="paymentMethodDiv">
									      <input type="checkbox"  lay-filter="paymentMethod" name="paymentMethod" th:value="${paymentMethod.key}" th:title="${paymentMethod.value}" style="display: none;">
									    </div>
								    </div>
                                </div>
                                <div class="col-sm-12" style="margin-top: 18px;">
	                            	<legend>支付费率设置</legend>
	                            </div>
	                            <div class="col-sm-3" th:each="paymentMethod:${paymentMethods}">
	                            	<div class="form-group" th:each="outChannel:${outChannels}" th:if="${'acp' ne outChannel.key}">
	                                	<label th:text="${outChannel.value}"></label>
										<div>
											<input min="0.1" readonly="readonly" th:attr = "ocv=${outChannel.key},ock=${outChannel.value}" th:id="paymentMethod+_+${outChannel.key}+_+${paymentMethod.key}" th:name="paymentMethod+_+${paymentMethod.key}" class="form-control" type="number" style="width:40%;display: inline;">
											<select th:id="paymentMethod+_+${outChannel.key}+_ru+_+${paymentMethod.key}" class="form-control" style="width:40%;display: inline;" required="required">
												<option th:each="bc:${rateUnits}" th:value="${bc.key}" th:text="${bc.value}"></option>
											</select>
											<div class="layui-form" lay-filter="outChannelOnDiv" th:if="${paymentMethod.key eq 3}" style="float: right;width: 20px;">
												<input type="checkbox" lay-filter="outChannelOn" name="outChannelOn" th:value="${outChannel.key}" th:title="开启" style="display: none;" checked="checked">
											</div>
										</div>
									</div>
                                </div>
                                <div class="col-sm-12" style="margin-top: 18px;">
	                            	<legend>代付费率设置</legend>
	                            </div>
	                            <div class="col-sm-6">
	                            	<div class="form-group" th:each="outChannel:${outChannels}" th:if="${'acp' eq outChannel.key}">
	                                	<label th:text="${outChannel.value}"></label>
										<div>
											<input readonly="readonly" th:id="${outChannel.key}" th:name="paymentMethodValue" class="form-control" type="number" style="width:40%;display: inline;" required="required">
											<select th:id="${outChannel.key}+_ru" class="form-control" style="width:40%;display: inline;" required="required">
												<option th:each="bc:${rateUnits}" th:value="${bc.key}" th:text="${bc.value}"></option>
											</select>
										</div>
									</div>
                                </div>
                                <div class="col-sm-12" style="margin-top: 18px;">
	                            	<legend>其他条件与限制</legend>
	                            </div>
	                            <div class="col-sm-6">
	                            	<div class="form-group">
                                        <label>是否支持代付 *</label>
                                        <select id="supportPaid" name="supportPaid" class="form-control" style="display: inline;">
											<option th:each="bc:${yesOrNo}" th:value="${bc.key}" th:text="${bc.value}"></option>
										</select>
                                    </div>
                                    <div class="form-group">
                                        <label>单日交易限额(元/日) *</label>
                                        <input id="dayLimit" name="dayLimit" class="form-control" type="number" min="1"  style="display: inline;" required="required">
                                    </div>
                                </div>
                                <div class="col-sm-6">
	                            	<div class="form-group">
                                        <label>是否支持提现 *</label>
                                        <select id="supportWithdrawal" name="supportWithdrawal" class="form-control" style="display: inline;">
											<option th:each="bc:${yesOrNo}" th:value="${bc.key}" th:text="${bc.value}"></option>
										</select>
                                    </div>
                                    <div class="form-group">
                                        <label>单月交易限额(元/月) *</label>
                                        <input id="monthLimit" name="monthLimit" class="form-control" type="number" min="1" style="display: inline;" required="required">
                                    </div>
                                </div>
                                <input type="hidden" name="tOneStr" id="tOneStr">
								<input type="hidden" name="dZeroStr" id="dZeroStr">
								<input type="hidden" name="paidStr" id="paidStr">
                            </div>
                        </fieldset>

                        <h1>完成</h1>
                        <fieldset>
                            <div class="text-center" style="margin-top: 120px">
                            	<div id = "commitValid">
	                            	<button class="btn btn-outline btn-warning dim btn-large-dim" type="button">
			                        	<i class="fa fa-warning"></i>
	                				</button>
			                        <h2>请确认您填写的信息是否正确!然后点击完成提交!</h2>
		                        </div>
                            	<div id = "commitWait" style="display: none">
	                            	<div class="sk-spinner sk-spinner-wave">
			                            <div class="sk-rect1"></div>
			                            <div class="sk-rect2"></div>
			                            <div class="sk-rect3"></div>
			                            <div class="sk-rect4"></div>
			                            <div class="sk-rect5"></div>
			                        </div>
			                        <h2>正在提交,请不要刷新页面,或关闭浏览器!</h2>
		                        </div>
		                        <div id = "commitComplete" style="display: none">
		                        
			                        <button class="btn btn-outline btn-primary dim btn-large-dim" type="button">
			                        	<i class="fa fa-check"></i>
	                				</button>
	                                <h2>提交成功!可以<a href="javascript:location.reload()" style="color:green;"> 刷新 </a>当前页面继续添加!</h2>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


	<div th:include="include::footer"></div>
	<script th:inline="javascript">
	/*<![CDATA[*/
		var outChannels = [[${outChannels}]];
	    var payConfigCompanys = [[${payConfigCompany}]];
	    var outChannels = [[${outChannels}]];
	    var merchNo = [[${merchNo}]];
	    var agentNs = [[${agentNs}]];
	/*]]>*/
	</script>
	<script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
	<script type="text/javascript" src="/js/plugins/staps/jquery.steps.min.js" ></script>
	<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script><!-- 日期框 -->
	<script type="text/javascript" src="/js/bootstrap-datetimepicker.zh-CN.js"></script><!-- 日期框 -->
	<script type="text/javascript" src="/js/jquery.selectBoxIt.min.js"></script>
	<script type="text/javascript" src="/js/appjs/pay/comm.js"></script>
	<script type="text/javascript" src="/js/md5.min.js"></script>
	<script type="text/javascript" src="/js/appjs/pay/merchant/add.js">
	</script>
	<script type="text/javascript">
	var isTwoCommit = false;
	$(document).ready(function () {
        $("#merchantForm").steps({
            bodyTag: "fieldset",
            onStepChanging: function (event, currentIndex, newIndex) {
            	
            	//点击下一步  1
                if (currentIndex > newIndex) {
                    return true;
                }
                if (newIndex === 2) {
                	var imgUrl = "";
                	$(".layui-upload-drag").each(function(){
                		imgUrl = $(this).next().next().val();
                		console.log(imgUrl);
                		if(imgUrl == ""){
                			layer.msg("所有图片必传!");
                			return;
                		}
                	});
                	if(imgUrl==""){
                		return false;
                	}
                }
                if (newIndex === 3) {
                	if(!getRate()){
                    	return false;
                	}
                }
                var form = $(this);
                if (currentIndex < newIndex) {
                    $(".body:eq(" + newIndex + ") label.error", form).remove();
                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                }
                form.validate().settings.ignore = ":disabled,:hidden";
                return form.valid();
            }, 
            onStepChanged: function (event, currentIndex, priorIndex) {
            	//点击下一步 2
                /* if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                    $(this).steps("next");
                }
                if (currentIndex === 1) {
                    $(this).steps("previous");
                } */
                if (currentIndex == 1) {
                    getPAgentRate();
                }
                loadFun();
            }, 
            onFinishing: function (event, currentIndex) {
            	//点击完成按钮时
                /* var form = $(this);
                form.validate().settings.ignore = ":disabled";
                return form.valid(); */
                if(isTwoCommit){
                	layer.msg("请不要重复提交相同资料!");
                	return false;
                }
            	var form = $(this);
                form.validate().settings.ignore = ":disabled";
                return form.valid() && getRate();
            }, 
            onFinished: function (event, currentIndex) {
            	isTwoCommit = true;
            	$("#commitWait").show();
				$("#commitValid").hide();
            	//完成提交
                var form = $(this);
                form.submit();
            },
            onInit: function(event, currentIndex){
            	loadFun();
            }
        }).validate({
            errorPlacement: function (error, element) {
                element.before(error)
            }//, rules: {confirm: {equalTo: "#password"}}
        })
    });
	
	</script>
</body>
</html>
